@use "page";
@use "ct-card";

@import "global-variables";
@import "@patternfly/patternfly/components/Table/table.scss";
@import "@patternfly/patternfly/components/Toolbar/toolbar.scss";

#app {
    section.pf-c-page__main-breadcrumb {
        padding-bottom: var(--pf-c-page__main-breadcrumb--PaddingTop);
     }
}

// FIXME: More styles from ct-system-overview
.current-metrics {
  --card-width: 200px;
  --pf-l-gallery--GridTemplateColumns: repeat(auto-fit, minmax(var(--card-width), 1fr));

  // the cards already have padding, align the "top 5" tables with the other content
  .pf-c-table {
      --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
      --pf-c-table--m-compact--cell--first-last-child--PaddingRight: 0;

      tr > * {
        --pf-c-table--cell--PaddingTop: var(--pf-global--spacer--xs);
        --pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--xs);
      }
  }

  .pf-c-card {
      &__title {
          font-size: var(--pf-global--FontSize--xl);
          font-weight: var(--pf-global--FontWeight--normal);
      }

      // Let the children get flexy
      &__body {
          display: flex;
          flex-direction: column;

          // Strip the padding from the first item,
          // including table headings
          > :first-child,
          > :first-child > thead > tr > th {
              padding-top: 0;
          }

          .pf-c-table thead th:not(:first-child),
          .pf-c-table tbody td:not(:first-child) {
              text-align: right;
          }
      }

      .progress-stack {
          display: grid;
          padding-bottom: var(--pf-global--spacer--md);
          grid-gap: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);


          &:not(:first-child) {
            padding-top: var(--pf-global--spacer--md);
          }
      }

      // Stretch the progress stack and description list so they fill up remaining space.
      // This pushes the (unflexing) tables to the bottom.
      .progress-stack,
      .pf-c-description-list {
          flex: 1 1 0;
          align-content: start;
      }

      // When progress stack and description list are used sequentially,
      // give the most space to the latter of the two elements.
      .progress-stack + .pf-c-description-list,
      .pf-c-description-list + .progress-stack {
          flex-basis: 100%;
      }

      // WebKit is a little wonky with flex sizing; it needs specific instructions here
      .pf-c-description-list:first-child {
          flex-grow: 0;
      }

      .pf-c-description-list__description {
          font-size: var(--pf-global--FontSize--sm);
      }
  }

  // Shrink progress bars and their gap a little
  .pf-c-progress {
      grid-gap: 0;
      --pf-c-progress__bar--Height: var(--pf-global--spacer--sm);
      // PF4 uses end; it probably should arguably use last baseline.
      // (perhaps end may work better for non-text content?)
      align-items: last baseline;
  }

  // Only underline the description
  .pf-c-button.pf-m-link.pf-m-inline:hover {
      text-decoration: none;

      .pf-c-progress__description {
          text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
      }
  }

  // Match font weight with description list terms
  .pf-c-progress__description {
      font-weight: var(--pf-global--FontWeight--bold);
  }

  // Recolor text
  .pf-m-link {
      &, &:hover {
        .pf-c-progress__measure {
            color: var(--pf-global--Color--100);
      }
    }
  }

  // default is way too wide for the cards
  .pf-c-description-list {
      --pf-c-description-list--m-horizontal__term--width: minmax(0, auto);
      --pf-c-description-list--m-horizontal__description--width: minmax(0, auto);
  }

  // Don't wrap network in / out data
  td[data-label=In],
  td[data-label=Out] {
      white-space: nowrap;
  }

  // Shrink network cards and data a little more
  // (as space is costly and they use a lot)
  // FIXME: Let's fix the content (split off units) and drop this when we can
  td[data-label=In],
  td[data-label=Out],
  td[data-label=Interface] {
      font-size: var(--pf-global--FontSize--xs);
  }

  // Shrink percentage column to allow for more service text
  th[data-label="%"],
  td[data-label="%"] {
      .pf-c-table__text {
      --pf-c-table--cell--MinWidth: 0;
      display: inline;
      }
      width: 2rem;
      min-width: 0;
  }

  // Adjust responsive versions of lg grid tables
  // (mainly for the network table, as it is more information dense)
  .pf-m-grid-lg.pf-c-table {
      tbody:first-of-type {
          border-top: none;
      }

      tbody tr:not(.pf-c-table__expandable-row) {
          --pf-c-table-tr--responsive--PaddingTop: var(--pf-global--spacer--sm);
          --pf-c-table-tr--responsive--PaddingRight: 0;
          --pf-c-table-tr--responsive--PaddingBottom: var(--pf-global--spacer--sm);
          --pf-c-table-tr--responsive--PaddingLeft: 0;
          --pf-c-table-tr--responsive--border-width--base: 1px;

          &:last-child {
              border-bottom: none;
          }

          > * {
              --pf-c-table--cell--responsive--PaddingTop: 0;
              --pf-c-table--cell--responsive--PaddingBottom: 0;
          }
      }
  }
}

@media (min-width: 641px) and (max-width: 1200px) {
  .current-metrics {
    --card-width: 200px;
  }

  .current-metrics .pf-c-card__body {
    overflow-y: auto;
    max-height: 50vw;
  }

  // Trim down the gutter space between cards
  .current-metrics.pf-l-gallery.pf-m-gutter {
      grid-gap: var(--pf-global--spacer--sm);
  }

  // Shave off a few pixels from cards
  .pf-c-card__header, .pf-c-card__title, .pf-c-card__body, .pf-c-card__footer {
    --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--sm);
    --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
    --pf-c-card--child--PaddingTop: var(--pf-global--spacer--sm);
    --pf-c-card--child--PaddingRight: var(--pf-global--spacer--md);
    --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--sm);
    --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--md);
  }

}

// Change progress layout in medium sizes
@media (min-width: 460px) and (max-width: 1200px) {
  // Stack description lists (instead of grid)
  .pf-c-description-list__group {
        display: block;
  }
}

// Stretch network card and reflow items
@media (min-width: 660px) and (max-width: 860px) {
    .current-metrics-network {
        grid-column: 1 / -1;

        // Reflow interfaces horizontally, with wrapping
        .pf-c-table > tbody {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
            grid-gap: 0 var(--pf-global--spacer--lg);
        }
    }

}

.metrics {
    --column-size: 10vw;
    --half-column-size: 8vw;
    --data-min-height: 5px;

    &-heading,
    &-minute {
        display: flex;
        justify-content: space-between;
    }

    &-graphs {
        display: inherit;

        .metrics-data,
        .metrics-label {
            width: var(--half-column-size);
        }

        .metrics-data.have-saturation,
        .metrics-label.have-saturation {
            width: var(--column-size);
        }

        .metrics-data {
            min-height: var(--data-min-height);
        }

    }

    &-label {
        margin: 0.5rem;
    }

    &-sublabels {
        font-size: var(--pf-global--FontSize--xs);
        color: rgba(0,0,0,0.7);
        display: flex;
    }

    &-label-graph {
        text-align: right;

        & .metrics-sublabels {
            justify-content: flex-end;
        }
    }

    &-label-graph.have-saturation {
        text-align: center;

        & .metrics-sublabels {
            justify-content: space-evenly;
        }
    }

    &-events-wrapper {
        width: 100%;
    }

    &-events {
        width: 100%;

        // Remove left padding from the table toggle
        .pf-c-table__toggle {
            padding-left: 0;
        }

        .description {
            display: grid;
            grid-template-columns: [info] 1fr [time] 1fr;

            .details {
                grid-column: time;
                grid-row: 1;
                display: flex;
                justify-content: space-between;
                width: 100%;
            }

            .type {
                grid-column: info;
            }
        }

        // Make messages such as `Loading...` or `No logs found` centered
        .cockpit-log-panel {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            .cockpit-logline {
                flex: 0 0 100%;
            }
        }
    }

    &-time,
    &-heading {
        position: relative;
        width: calc(100% + var(--pf-c-page__main-section--PaddingRight) + var(--pf-c-page__main-section--PaddingLeft));
        right: var(--pf-c-page__main-section--PaddingRight);

        padding-right: var(--pf-c-page__main-section--PaddingRight);
        padding-left: var(--pf-c-page__main-section--PaddingLeft);

    }

    &-time {
        background: #eee;

        padding: 0.5rem 1rem;
        margin-left: var(--pf-global--spacer--md);
    }

    &-heading {
        background: #fff;

        margin-bottom: 1rem;

        box-shadow: var(--pf-global--BoxShadow--sm);

        &-sticky {
            position: sticky;
            top: 0;
            z-index: 99;
        }
    }

    &-history {
        padding: 0;
    }

    &-data {
        display: grid;
        contain: strict;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        // Make SVG and generated before/after line position relative to metrics-data
        position: relative;

        // vertical ruler line for areas with data, and horizontal tick mark for utilization half
        &.valid-data:before {
            content: "";
            position: absolute;
            z-index: 1;
            width: 100%;
            top: 0;
            bottom: 0;
            border-right: 1px solid rgba(0,0,0,0.3);
            border-top: 1px solid rgba(0,0,0,0.3);
        }

        &.valid-data.have-saturation:before {
            width: 50%;
        }


        // horizontal tick mark for saturation half, for resources that have it
        &.valid-data.have-saturation:after {
            content: "";
            position: absolute;
            z-index: 1;
            width: 50%;
            left: 50%;
            border-top: 1px solid rgba(0,0,0,0.3);
        }

        > svg {
            fill: var(--color);
            min-width: 2px;
            width: 100%;
            height: 100%;
            // WebKit has an issue with normal positioning (height exceeds bounds), but absolute works fine
            position: absolute;
            top: 0;
            left: 0;
        }

        &-cpu {
            --color: plum;
        }

        &-memory {
            --color: lightblue;
        }

        &-disks {
            --color: lightgreen;
        }

        &-network {
            --color: lightsalmon;
        }

        // compressed minutes without events are simple bars
        .compressed {
            display: grid;
            grid-template-areas: ". utilization .";

            --util-pct: calc(100% * var(--utilization));
            grid-template-columns: calc(100% - var(--util-pct)) var(--util-pct);

            > .saturation,
            > .utilization {
                background-color: var(--color);
            }

            > .utilization {
                grid-area: utilization;
            }

            > .saturation {
                grid-area: saturation;
                opacity: 0.7;
            }
        }

        &.have-saturation .compressed {
            grid-template-areas: ". utilization saturation .";
            --util-pct: calc(50% * var(--utilization));
            --sat-pct: calc(50% * var(--saturation));
            grid-template-columns: calc(50% - var(--util-pct)) var(--util-pct) var(--sat-pct) calc(50% - var(--sat-pct));
        }
    }

    // vertical dotted line through graph center, for areas without data
    &-data:after {
        content: "";
        z-index: -1;
        top: 0;
        bottom: 0;
        position: absolute;
    }

    &-data.empty-data:after {
        position: initial;
        border-right: 1px dotted rgba(0,0,0,0.3);
    }

    &-data.empty-data.have-saturation:after {
        position: absolute;
        border-left: 1px dotted rgba(0,0,0,0.3);
        border-right: none;
        left: 50%;
    }

    .pf-c-card__body:first-child {
        padding-top: 0;
    }
}

// Graph column labels are the widest part; scale down the labels for narrow widths
@media (min-width: 800px) and (max-width: 1200px) {
    .metrics-label-graph {
        font-size: var(--pf-global--FontSize--s);
    }
}
@media (max-width: 800px) {
    .metrics-label-graph {
        font-size: var(--pf-global--FontSize--xs);
    }
}

.bottom-panel {
    display: flex;
    justify-content: space-around;
    padding: 1em;
}

.nodata {
    margin: 1em;
}

.select-min {
    width: min-content;
}

#pcp-settings-modal {
    .pcp-settings-modal-text {
        // "Read more..." link
        a {
                padding-left: 1em;
                white-space: nowrap;
        }
    }

    // leave some space for the focus rings
    .pf-c-switch {
        margin-bottom: 10px;
    }
}
